<template>
	<el-card id="form-editor">
		<el-form :model="formParams" :rules="rules" :label-width="labelWidth" label-position="right" label-suffix=":" size="medium">
			<el-row>
				<form-element
					:colWidth="colWidth"
					:formItems="formItems"
					:itemWidth="itemWidth"
					:model="formParams"
					:errorMsg="errorMsg"
					@handle-change="handleChange"
					@handle-blur="handleBlur">
				</form-element>
			</el-row>
			<el-row>
				<el-col :sm="22">
					<el-button class="button" type="primary" @click="save()">保存</el-button>
					<el-button v-show="action === 'add'" class="button" type="warning" @click="reset()">重置</el-button>
				</el-col>
			</el-row>
		</el-form>
	</el-card>
</template>

<script>
// form表单清除错误提示解决方法： this.$refs['组件引用名'].clearValidate()
// form表单显示后台错误提示： form-item里有个error的属性，刚用elementUI的童鞋可能很容易忽略
// 在请求前将错误信息置空, 要实现在表单验证的地方显示后来返回的错误，加上error的属性，在data中定义一个错误信息的变量errorMsg，修改变量即可
export default {
	name: "form-editor",
	props: {
		formItems: {
			type: Array,
			default() {
				return [];
			}
		},
		formParams: {
			type: Object,
			default() {
				return {};
			}
		},
		rules: {
			type: Object,
			default() {
				return {};
			}
		},
		errorMsg: {
			type: String,
			default: ""
		},
		labelWidth: {
			type: String,
			default: "90px"
		},
		colWidth: {
			type: Number,
			default: 8,
			validator: (value) => {
				return (/^[0-9]*[1-9][0-9]*$/).test(value);
			}
		},
		itemWidth: {
			type: Number,
			default: 18,
			validator: (value) => {
				return (/^[0-9]*[1-9][0-9]*$/).test(value);
			}
		},
		action: {
			type: String,
			default: "add"
		}
	},
	data() {
		return {};
	},
	methods: {
		save() {
			this.updateParams();
			this.$emit("handle-save", this.formParams);
		},
		reset() {
			this.formParams = {};
			this.$emit("handle-reset", this.formParams);
		},
		updateParams() {
			this.formParams = this.resourceUtils.removeInvalid(this.formParams);
		},
		handleChange(prop, form) {
			this.$emit("handle-change", prop, form);
		},
		handleBlur(prop, form) {
			this.$emit("handle-blur", prop, form);
		}
	}
};
</script>

<style scoped>
#form-editor {
	background-color: #F5F5F5;
}

.button {
	width: 20%;
}
</style>
